import { ref, onMounted, onBeforeUnmount,markRaw } from 'vue';
import * as echarts from 'echarts';
//第一个参数为绑定的图表实例（元素），第二个参数图表的配置函数（配置项）
export function useChart(chartRef, setChartData) {
    // ref() 函数创建一个响应式数据对象，用于存储图表实例。
    const chartInstance = ref(null);
    // 名为 initChart 的函数，它负责初始化一个 ECharts 图表实例。
    const initChart=async ()=>{
        // 判断图表元素是否存在
        if(chartRef.value){
            // 初始化图表实例
            chartInstance.value=markRaw(echarts.init(chartRef.value)) ;//
            //调用配置项 异步
           const options=await setChartData()
            //设置图表选项	
            //setOption 方法来应用图表的配置选项。
            //chartOptions 是一个响应式引用，存储了图表的初始配置选项。
            chartInstance.value.setOption(options)
        }
    }

    // 图表尺寸调整
    const resizeChart = () => {
        chartInstance.value?.resize(); // 可选链操作符（?.）的使用
    };
    /* 
    第一个参数：'resize'
这是一个字符串，表示要监听的事件类型。resize事件会被触发。
第二个参数：resizeChart这是一个函数，当指定的事件发生时，这个函数会被调用。
    */
    onMounted(() => {
        initChart();
        // 监听窗口大小变化
        window.addEventListener('resize', resizeChart);
    });

    // 防止内存泄漏
    onBeforeUnmount(() => {
        window.removeEventListener('resize', resizeChart);
        if (chartInstance.value) {
            chartInstance.value.dispose(); // dispose 方法的作用是释放图表实例所占用的资源，以便在不再需要图表时清理内存
        }
    });
} 